<template>
  <div></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'chart-pie',
  props: {
    id: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pieChart: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.pieChartInit()
    })
  },
  beforeDestroy() {
    if (!this.pieChart) {
      return
    }
    this.pieChart.dispose()
    this.pieChart = null
  },
  watch: {
    // 监听数据变化
    data: {
      handler(newVal, oldVal) {
        if (this.pieChart) {
          if (newVal) {
            this.data = newVal
            this.pieChartInit()
          } else {
            this.data = oldVal
            this.pieChartInit()
          }
        } else {
          this.$nextTick(() => {
            this.pieChartInit()
          })
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  methods: {
    pieChartInit() {
      this.pieChart = echarts.init(document.getElementById(this.id))

      // let pieChartData = {
      //   data: this.data.datas,
      //   name: this.data.name,
      //   title: this.data.title
      // }
      const pieChartOption = {
        title: {
          text: this.data.title,
          left: 'center',
          textStyle: {
            color: '#8EC5FF',
            fontSize: 30
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '购买数量:' + '{c}本' + '</br>' + '购买占比:' + '{d}%'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
          data: this.data.legend
        },
        series: [
          {
            name: this.data.name,
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'], // 设置居中
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            data: this.data.datas,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    '#8EC5FF',
                    '#C1AFFF',
                    '#FF8787',
                    '#FFCC7D',
                    '#A8EDEE',
                    '#cccccc',
                    '#ef5b9c',
                    '#b2d235',
                    '#1a2933',
                    '#2a5caa',
                    '#1d953f',
                    '#dea32c',
                    '#f6f5ec',
                    '#11264f',
                    '#2f271d',
                    '#ffd400',
                    '#ed1941',
                    '#225a1f',
                    '#FF00FF',
                    '#8470FF',
                    '#00CED1'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      this.pieChart.setOption(pieChartOption)
      window.addEventListener('resize', () => {
        if (this.pieChart) {
          this.pieChart.resize()
        }
      })
    }
  }
}
</script>

<style></style>
